<template>
  <div >
    <el-table
      :data="tableData1.filter(data => !search || data.goods.toLowerCase().includes(search.toLowerCase())).slice((currentPage-1)*pageSize,currentPage*pageSize)"
      style="width: 100%"
      :header-cell-style="{background:'#eef1f6',color:'#121417'}"
      class="item"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="订单号:">
              <span>{{ props.row.orderId }}</span>
            </el-form-item>
            <el-form-item label="商品名称:">
              <span>{{ props.row.goods }}</span>
            </el-form-item>
            <el-form-item label="购买数量:">
              <span>{{ props.row.amount }}</span>
            </el-form-item>
            <el-form-item label="订单总价:">
              <span>{{ props.row.price }}</span>
            </el-form-item>
<!--            <el-form-item label="尺码:">-->
<!--              <span>{{ props.row.size }}</span>-->
<!--            </el-form-item>-->
            <el-form-item label="地址:">
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item label="购买时间:">
              <span>{{ props.row.buyTime }}</span>
            </el-form-item>
            <el-form-item label="订单状态:">
              <span>{{ props.row.state }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column
        label="订单编号"
        prop="orderId">
      </el-table-column>
      <el-table-column
        label="商品图片"
        prop="img">
        <template slot-scope="scope" class="picture">
          <img :src="scope.row.img" width="100" height="100">
        </template>
      </el-table-column>
      <el-table-column
        label="商品名称"
        prop="goods">
      </el-table-column>
      <el-table-column
        label="订单总价"
        prop="price">
      </el-table-column>
      <el-table-column
        label="购买时间"
        prop="buyTime"
        sortable
      >
      </el-table-column>
      <el-table-column
        label="订单状态"
        prop="state">
      </el-table-column>
      <el-table-column
        fixed="right"
        width="200"
        align="right">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"/>
        </template>
        <template slot-scope="scope">
          <el-button
            size="small"
            type="danger"
            style="float: left"
            @click="pay(scope.row)">支付
          </el-button>
          <el-button
            size="small"
            style="float: left"
            @click="updateAddress(scope.row)">修改地址
          </el-button>
          <el-button
            size="small"
            style="float: left;margin-top: 10px;margin-left: 30px"
            @click="cancelOrder(scope.row)">取消订单
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="25%">
      <el-form :model="tableData" ref="tableData" label-width="80px">
        <el-form-item label="地址">
<!--          <el-input v-model="tableData.address" type="text" style="width: 600px"></el-input>-->
          <el-autocomplete
            v-model="tableData.address"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect">
            <i
              class="el-icon-edit el-input__icon"
              slot="suffix"
              @click="handleIconClick">
            </i>
            <template slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
              <span class="addr">{{ item.address }}</span>
            </template>
          </el-autocomplete>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="save()">保存</el-button>
          <el-button @click="">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-table
        :show-header="false"
        :data="tableData2.slice((currentPage-1)*pageSize,currentPage*pageSize).filter(data => !search || data.goods.toLowerCase().includes(search.toLowerCase()))"
        style="width: 100%"
        :default-sort="{prop: 'date', order: 'descending'}"
        class="item"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="订单号:">
              <span>{{ props.row.orderId }}</span>
            </el-form-item>
            <el-form-item label="商品名称:">
              <span>{{ props.row.goods }}</span>
            </el-form-item>
            <el-form-item label="购买数量:">
              <span>{{ props.row.amount }}</span>
            </el-form-item>
            <el-form-item label="订单总价:">
              <span>{{ props.row.price }}</span>
            </el-form-item>
            <el-form-item label="尺码:">
              <span>{{ props.row.size }}</span>
            </el-form-item>
            <el-form-item label="地址:">
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item label="购买时间:">
              <span>{{ props.row.buyTime }}</span>
            </el-form-item>
            <el-form-item label="订单状态:">
              <span>{{ props.row.state }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="订单编号"
        prop="orderId">
      </el-table-column>
      <el-table-column
        label="商品图片"
        prop="img">
        <template slot-scope="scope">
          <img :src="scope.row.img" width="100" height="100">
        </template>
      </el-table-column>
      <el-table-column
        label="商品名称"
        prop="goods">
      </el-table-column>
      <el-table-column
        label="订单总价"
        prop="price">
      </el-table-column>
      <el-table-column
        label="购买时间"
        prop="buyTime"
        sortable
      >
      </el-table-column>
      <el-table-column
        label="订单状态"
        prop="state">
      </el-table-column>
      <el-table-column
        align="right"
        width="200"
        fixed="right"
      >
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"/>
        </template>
        <template slot-scope="scope">
          <el-button
            size="small"
            style="float: left"
            @click="logistics(scope.row)">物流</el-button>
          <el-button
            size="small"
            style="float: left"
            @click="refund(scope.row)">申请退款</el-button>
          <el-dialog
            title="评价"
            :visible.sync="logisticsInformation"
            width="50%"
            center
            :append-to-body="true">
            <el-form :model="tableData" ref="tableData" label-width="100px" style="margin-left: 100px" >
              <el-form-item label="评价：" prop="name">
                <el-input v-model="tableData.evaluate" type="textarea" style="width: 250px;" readonly></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="logisticsInformation = false">取 消</el-button>
                    <el-button type="primary" @click="logisticsInformation = false">确 定</el-button>
                  </span>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
    <el-table
      :show-header="false"
      :data="tableData3.slice((currentPage-1)*pageSize,currentPage*pageSize).filter(data => !search || data.goods.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%"
      :default-sort="{prop: 'date', order: 'descending'}"
      class="item"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="订单号:">
              <span>{{ props.row.orderId }}</span>
            </el-form-item>
            <el-form-item label="商品名称:">
              <span>{{ props.row.goods }}</span>
            </el-form-item>
            <el-form-item label="购买数量:">
              <span>{{ props.row.amount }}</span>
            </el-form-item>
            <el-form-item label="订单总价:">
              <span>{{ props.row.price }}</span>
            </el-form-item>
            <el-form-item label="尺码:">
              <span>{{ props.row.size }}</span>
            </el-form-item>
            <el-form-item label="地址:">
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item label="购买时间:">
              <span>{{ props.row.buyTime }}</span>
            </el-form-item>
            <el-form-item label="订单状态:">
              <span>{{ props.row.state }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="订单编号"
        prop="orderId">
      </el-table-column>
      <el-table-column
        label="商品图片"
        prop="img">
        <template slot-scope="scope" class="picture">
          <img :src="scope.row.img" width="100" height="100">
        </template>
      </el-table-column>
      <el-table-column
        label="商品名称"
        prop="goods">
      </el-table-column>
      <el-table-column
        label="订单总价"
        prop="price">
      </el-table-column>
      <el-table-column
        label="购买时间"
        prop="buyTime"
        sortable
      >
      </el-table-column>
      <el-table-column
        label="订单状态"
        prop="state">
      </el-table-column>
      <el-table-column
        fixed="right"
        width="200"
        align="right">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"/>
        </template>
        <template slot-scope="scope">
          <el-button
            size="small"
            type="danger"
            style="float: left"
            @click="update(scope.row)">收货
          </el-button>
          <el-button
            size="small"
            style="float: left"
            @click="logistics(scope.row)">物流
          </el-button>
          <el-button
            size="small"
            style="float: left;margin-top: 10px;margin-left: 10px"
            @click="returnRefund(scope.row)">申请退货退款
          </el-button>
          <el-dialog
            title="物流系信息"
            :visible.sync="logisticsInformation"
            width="50%"
            center
            :append-to-body="true">
            <el-form :model="tableData" ref="tableData" label-width="100px" style="margin-left: 100px" >
              <el-form-item label="物流信息：" prop="name">
                <el-input v-model="tableData.evaluate" type="textarea" style="width: 250px;" readonly></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="logisticsInformation = false">取 消</el-button>
                    <el-button type="primary" @click="logisticsInformation = false">确 定</el-button>
                  </span>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
    <el-table
      :show-header="false"
      :data="tableData4.slice((currentPage-1)*pageSize,currentPage*pageSize).filter(data => !search || data.goods.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%"
      :default-sort="{prop: 'date', order: 'descending'}"
      class="item"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="订单号:">
              <span>{{ props.row.orderId }}</span>
            </el-form-item>
            <el-form-item label="商品名称:">
              <span>{{ props.row.goods }}</span>
            </el-form-item>
            <el-form-item label="购买数量:">
              <span>{{ props.row.amount }}</span>
            </el-form-item>
            <el-form-item label="订单总价:">
              <span>{{ props.row.price }}</span>
            </el-form-item>
            <el-form-item label="尺码:">
              <span>{{ props.row.size }}</span>
            </el-form-item>
            <el-form-item label="地址:">
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item label="购买时间:">
              <span>{{ props.row.buyTime }}</span>
            </el-form-item>
            <el-form-item label="订单状态:">
              <span>{{ props.row.state }}</span>
            </el-form-item>
            <el-form-item label="完成时间:">
              <span>{{ props.row.finTime }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="订单编号"
        prop="orderId">
      </el-table-column>
      <el-table-column
        label="商品图片"
        prop="img">
        <template slot-scope="scope" class="picture">
          <img :src="scope.row.img" width="100" height="100">
        </template>
      </el-table-column>
      <el-table-column
        label="商品名称"
        prop="goods">
      </el-table-column>
      <el-table-column
        label="订单总价"
        prop="price">
      </el-table-column>
      <el-table-column
        label="购买时间"
        prop="buyTime"
        sortable
      >
      </el-table-column>
      <el-table-column
        label="订单状态"
        prop="state">
      </el-table-column>
      <el-table-column
        fixed="right"
        width="200"
        align="right">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"/>
        </template>
        <template slot-scope="scope">
          <el-button
            style="float: left"
            size="mini"
            type="danger"
            @click="updateEvaluate(scope.row)">评价
          </el-button>
          <el-dialog
            title="评价"
            :visible.sync="evaluateFrame"
            width="50%"
            center
            :append-to-body="true">
            <el-form :model="tableData" ref="tableData" label-width="100px" style="margin-left: 100px" >
              <el-form-item label="评价：" prop="name">
                <el-input v-model="tableData.evaluate" type="textarea" style="width: 250px"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="evaluateFrame = false">取 消</el-button>
                    <el-button type="primary" @click="evaluateFrame = false" v-on:click="assess(tableData)">确 定</el-button>
                  </span>
          </el-dialog>

        </template>
      </el-table-column>
    </el-table>
    <el-table
      :show-header="false"
      :data="tableData5.slice((currentPage-1)*pageSize,currentPage*pageSize).filter(data => !search || data.goods.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%"
      :default-sort="{prop: 'date', order: 'descending'}"
      class="item"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="订单号:">
              <span>{{ props.row.orderId }}</span>
            </el-form-item>
            <el-form-item label="商品名称:">
              <span>{{ props.row.goods }}</span>
            </el-form-item>
            <el-form-item label="购买数量:">
              <span>{{ props.row.amount }}</span>
            </el-form-item>
            <el-form-item label="订单总价:">
              <span>{{ props.row.price }}</span>
            </el-form-item>
            <el-form-item label="尺码:">
              <span>{{ props.row.size }}</span>
            </el-form-item>
            <el-form-item label="地址:">
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item label="购买时间:">
              <span>{{ props.row.buyTime }}</span>
            </el-form-item>
            <el-form-item label="订单状态:">
              <span>{{ props.row.state }}</span>
            </el-form-item>
            <el-form-item label="完成时间:">
              <span>{{ props.row.finTime }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="订单编号"
        prop="orderId">
      </el-table-column>
      <el-table-column
        label="商品图片"
        prop="img">
        <template slot-scope="scope" class="picture">
          <img :src="scope.row.img" width="100" height="100">
        </template>
      </el-table-column>
      <el-table-column
        label="商品名称"
        prop="goods">
      </el-table-column>
      <el-table-column
        label="订单总价"
        prop="price">
      </el-table-column>
      <el-table-column
        label="购买时间"
        prop="buyTime"
        sortable
      >
      </el-table-column>
      <el-table-column
        label="订单状态"
        prop="state">
      </el-table-column>
      <el-table-column
        fixed="right"
        width="200"
        align="right">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"/>
        </template>
        <template slot-scope="scope">
          <el-button
            style="float: left"
            size="mini"
            type="danger"
            @click="trackEvaluate(scope.row)">追评
          </el-button>
          <el-dialog
            title="追评"
            :visible.sync="trackEvaluateFrame"
            width="50%"
            center
            :append-to-body="true">
            <el-form :model="tableData" ref="tableData" label-width="100px" style="margin-left: 5%" >
              <el-form-item label="追评：" prop="name">
                <el-input v-model="tableData.evaluate" type="textarea" style="width: 300px;"></el-input>
              </el-form-item>
              <span style="margin-left: 20%;font-family: 宋体;font-size: smaller;color: #ff3213">*在已评价的内容之后继续评价即可</span>
            </el-form>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="trackEvaluateFrame = false">取 消</el-button>
                    <el-button type="primary" @click="trackEvaluateFrame = false" v-on:click="trackAssess(tableData)">确 定</el-button>
                  </span>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
    <el-table
      :show-header="false"
      :data="tableData6.slice((currentPage-1)*pageSize,currentPage*pageSize).filter(data => !search || data.goods.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%"
      :default-sort="{prop: 'date', order: 'descending'}"
      class="item"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="订单号:">
              <span>{{ props.row.orderId }}</span>
            </el-form-item>
            <el-form-item label="商品名称:">
              <span>{{ props.row.goods }}</span>
            </el-form-item>
            <el-form-item label="购买数量:">
              <span>{{ props.row.amount }}</span>
            </el-form-item>
            <el-form-item label="订单总价:">
              <span>{{ props.row.price }}</span>
            </el-form-item>
            <el-form-item label="尺码:">
              <span>{{ props.row.size }}</span>
            </el-form-item>
            <el-form-item label="地址:">
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item label="购买时间:">
              <span>{{ props.row.buyTime }}</span>
            </el-form-item>
            <el-form-item label="订单状态:">
              <span>{{ props.row.state }}</span>
            </el-form-item>
            <el-form-item label="完成时间:">
              <span>{{ props.row.finTime }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="订单编号"
        prop="orderId">
      </el-table-column>
      <el-table-column
        label="商品图片"
        prop="img">
        <template slot-scope="scope" class="picture">
          <img :src="scope.row.img" width="100" height="100">
        </template>
      </el-table-column>
      <el-table-column
        label="商品名称"
        prop="goods">
      </el-table-column>
      <el-table-column
        label="订单总价"
        prop="price">
      </el-table-column>
      <el-table-column
        label="购买时间"
        prop="buyTime"
        sortable
      >
      </el-table-column>
      <el-table-column
        label="订单状态"
        prop="state">
      </el-table-column>
      <el-table-column
        fixed="right"
        width="200"
        align="right">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"/>
        </template>
      </el-table-column>
    </el-table>
    <el-table
      :show-header="false"
      :data="tableData7.slice((currentPage-1)*pageSize,currentPage*pageSize).filter(data => !search || data.goods.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%"
      :default-sort="{prop: 'date', order: 'descending'}"
      class="item"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="订单号:">
              <span>{{ props.row.orderId }}</span>
            </el-form-item>
            <el-form-item label="商品名称:">
              <span>{{ props.row.goods }}</span>
            </el-form-item>
            <el-form-item label="购买数量:">
              <span>{{ props.row.amount }}</span>
            </el-form-item>
            <el-form-item label="订单总价:">
              <span>{{ props.row.price }}</span>
            </el-form-item>
            <el-form-item label="尺码:">
              <span>{{ props.row.size }}</span>
            </el-form-item>
            <el-form-item label="地址:">
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item label="购买时间:">
              <span>{{ props.row.buyTime }}</span>
            </el-form-item>
            <el-form-item label="订单状态:">
              <span>{{ props.row.state }}</span>
            </el-form-item>
            <el-form-item label="完成时间:">
              <span>{{ props.row.finTime }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="订单编号"
        prop="orderId">
      </el-table-column>
      <el-table-column
        label="商品图片"
        prop="img">
        <template slot-scope="scope" class="picture">
          <img :src="scope.row.img" width="100" height="100">
        </template>
      </el-table-column>
      <el-table-column
        label="商品名称"
        prop="goods">
      </el-table-column>
      <el-table-column
        label="订单总价"
        prop="price">
      </el-table-column>
      <el-table-column
        label="购买时间"
        prop="buyTime"
        sortable
      >
      </el-table-column>
      <el-table-column
        label="订单状态"
        prop="state">
      </el-table-column>
      <el-table-column
        fixed="right"
        width="200"
        align="right">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"/>
        </template>
      </el-table-column>
    </el-table>
    <el-table
      :show-header="false"
      :data="tableData8.slice((currentPage-1)*pageSize,currentPage*pageSize).filter(data => !search || data.goods.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%"
      :default-sort="{prop: 'date', order: 'descending'}"
      class="item"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="订单号:">
              <span>{{ props.row.orderId }}</span>
            </el-form-item>
            <el-form-item label="商品名称:">
              <span>{{ props.row.goods }}</span>
            </el-form-item>
            <el-form-item label="购买数量:">
              <span>{{ props.row.amount }}</span>
            </el-form-item>
            <el-form-item label="订单总价:">
              <span>{{ props.row.price }}</span>
            </el-form-item>
            <el-form-item label="尺码:">
              <span>{{ props.row.size }}</span>
            </el-form-item>
            <el-form-item label="地址:">
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item label="购买时间:">
              <span>{{ props.row.buyTime }}</span>
            </el-form-item>
            <el-form-item label="订单状态:">
              <span>{{ props.row.state }}</span>
            </el-form-item>
            <el-form-item label="完成时间:">
              <span>{{ props.row.finTime }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="订单编号"
        prop="orderId">
      </el-table-column>
      <el-table-column
        label="商品图片"
        prop="img">
        <template slot-scope="scope" class="picture">
          <img :src="scope.row.img" width="100" height="100">
        </template>
      </el-table-column>
      <el-table-column
        label="商品名称"
        prop="goods">
      </el-table-column>
      <el-table-column
        label="订单总价"
        prop="price">
      </el-table-column>
      <el-table-column
        label="购买时间"
        prop="buyTime"
        sortable
      >
      </el-table-column>
      <el-table-column
        label="订单状态"
        prop="state">
      </el-table-column>
      <el-table-column
        fixed="right"
        width="200"
        align="right">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"/>
        </template>
      </el-table-column>
    </el-table>
    <el-table
      :show-header="false"
      :data="tableData9.slice((currentPage-1)*pageSize,currentPage*pageSize).filter(data => !search || data.goods.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%"
      :default-sort="{prop: 'date', order: 'descending'}"
      class="item"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="订单号:">
              <span>{{ props.row.orderId }}</span>
            </el-form-item>
            <el-form-item label="商品名称:">
              <span>{{ props.row.goods }}</span>
            </el-form-item>
            <el-form-item label="购买数量:">
              <span>{{ props.row.amount }}</span>
            </el-form-item>
            <el-form-item label="订单总价:">
              <span>{{ props.row.price }}</span>
            </el-form-item>
            <el-form-item label="尺码:">
              <span>{{ props.row.size }}</span>
            </el-form-item>
            <el-form-item label="地址:">
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item label="购买时间:">
              <span>{{ props.row.buyTime }}</span>
            </el-form-item>
            <el-form-item label="订单状态:">
              <span>{{ props.row.state }}</span>
            </el-form-item>
            <el-form-item label="完成时间:">
              <span>{{ props.row.finTime }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="订单编号"
        prop="orderId">
      </el-table-column>
      <el-table-column
        label="商品图片"
        prop="img">
        <template slot-scope="scope" class="picture">
          <img :src="scope.row.img" width="100" height="100">
        </template>
      </el-table-column>
      <el-table-column
        label="商品名称"
        prop="goods">
      </el-table-column>
      <el-table-column
        label="订单总价"
        prop="price">
      </el-table-column>
      <el-table-column
        label="购买时间"
        prop="buyTime"
        sortable
      >
      </el-table-column>
      <el-table-column
        label="订单状态"
        prop="state">
      </el-table-column>
      <el-table-column
        fixed="right"
        width="200"
        align="right">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"/>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-pagination align='center'
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-sizes="[1,5,10,20]"
                     :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="tableDatas.length">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: "AllOrder",
    provide(){
      return{
        reload:this.reload
      }
    },
    data() {
      return {
        restaurants: [],
        tableDatas: [],
        tableData1: [],
        tableData2: [],
        tableData3: [],
        tableData4: [],
        tableData5: [],
        tableData6: [],
        tableData7: [],
        tableData8: [],
        tableData9: [],
        search: '',
        currentPage: 1, // 当前页码
        total: 20, // 总条数
        pageSize: 2,// 每页的数据条数
        tableData:[],
        dialogTitle: "订单修改",
        dialogVisible: false,
        evaluateFrame: false,
        trackEvaluateFrame: false,
        logisticsInformation: false
      }
    },
    mounted() {
      this.manSport();
      this.restaurants = this.loadAll();
    },
    inject:[
      'reload'
    ],
    methods: {
      getTime() {
        var time = new Date();
        var y = time.getFullYear();
        var m = time.getMonth() + 1;
        var d = time.getDate();
        var h = time.getHours();
        var min = time.getMinutes();
        m = m < 10 ? (m = "0" + m) : m;
        d = d < 10 ? (d = "0" + d) : d;
        h = h < 10 ? (h = "0" + h) : h;
        min = min < 10 ? (min = "0" + min) : min;
        return y + m + d + h + min;
      },
      manSport() {
        console.log(9999999);
        let id = window.sessionStorage.getItem("id");
        console.log(id)
        this.$http.post('http://localhost:8888/order/query', {emulateJSON: true})
          .then(res => {
            let orders = res.data.data;
            orders.forEach((item, index, list) => {
              console.log(item.id)
              if (item.id == id) {
                this.tableDatas.push(item)
              }
            })
            this.tableDatas.forEach((item, index, list) => {
              if (item.state == '未支付') {
                this.tableData1.push(item);
              }
            })
            this.tableDatas.forEach((item, index, list) => {
              if (item.state == '待发货') {
                this.tableData2.push(item);
              }
            })
            this.tableDatas.forEach((item, index, list) => {
              if (item.state == '待收货') {
                this.tableData3.push(item);
              }
            });
            this.tableDatas.forEach((item, index, list) => {
              if (item.state == '待评价') {
                this.tableData4.push(item);
              }
            });
            this.tableDatas.forEach((item, index, list) => {
              if (item.state == '已完成') {
                this.tableData5.push(item);
              }
            });
            this.tableDatas.forEach((item, index, list) => {
              if (item.state == '已取消') {
                this.tableData6.push(item);
              }
            });
            this.tableDatas.forEach((item, index, list) => {
              if (item.state == '申请退款中') {
                this.tableData7.push(item);
              }
            });
            this.tableDatas.forEach((item, index, list) => {
              if (item.state == '申请退货退款中') {
                this.tableData8.push(item);
              }
            });
            this.tableDatas.forEach((item, index, list) => {
              if (item.state == '已退款') {
                this.tableData9.push(item);
              }
            });
          })
      },
      pay(orderForm) {
        this.$http.post('http://localhost:8888/AliPay', {
          goods: orderForm.goods,
          done_money: orderForm.price,
          done_id: orderForm.orderId
        }, {emulateJSON: true}).then(res => {
          if (res) {
            document.write(res.data.data);
          } else {
            this.$alert("错误：" + res, "提示", {
              confirmButtonText: '确定'
            });
          }
        });
        this.reload();
        this.manSport();
      },
      update(order) {
        order.state = "待评价";
        this.$http.post('http://localhost:8888/order/update', order, {emulateJSON: true})
          .then(res => {
          });
        this.reload();
        this.manSport();
      },
      assess(order){
        order.finTime = this.getTime();
        order.state = "已完成";
        this.$http.post('http://localhost:8888/order/update', order, {emulateJSON: true})
          .then(res => {
          });
        this.reload();
        this.manSport();
      },
      trackAssess(order){
        console.log(order);
        order.state = "已完成";
        this.$http.post('http://localhost:8888/order/update', order, {emulateJSON: true})
          .then(res => {
          });
        this.reload();
        this.manSport();
      },
      cancelOrder(order){
        order.state = "已取消";
        this.$http.post('http://localhost:8888/order/update', order, {emulateJSON: true})
          .then(res => {
          });
        this.reload();
        this.manSport();
      },
      handleClick(tab, event) {
        console.log(tab, event)
      },
      logistics(order){
        this.logisticsInformation = true;
        this.tableData = order;
      },
      refund(order){
        order.state = "申请退款中";
        this.$http.post('http://localhost:8888/order/update', order, {emulateJSON: true})
          .then(res => {
          });
        this.reload();
        this.manSport();
      },
      returnRefund(order){
        order.state = "申请退货退款中";
        this.$http.post('http://localhost:8888/order/update', order, {emulateJSON: true})
          .then(res => {
          });
        this.reload();
        this.manSport();
      },
      updateEvaluate(scopeForm){
        this.evaluateFrame = true;
        this.tableData = scopeForm;
      },
      trackEvaluate(scopeForm){
        this.trackEvaluateFrame = true;
        this.tableData = scopeForm;
      },
      //每页条数改变时触发 选择一页显示多少行
      handleSizeChange(val) {
        this.currentPage = 1;
        this.pageSize = val;
      },
      //当前页改变时触发 跳转其他页
      handleCurrentChange(val) {
        this.currentPage = val;
      },
      updateAddress(index) {
        this.tableData = index;
        this.dialogVisible = true;
      },
      save(){
        this.$http.post('http://localhost:8888/order/update', this.tableData, {emulateJSON: true})
          .then(res => {
          });
        this.dialogVisible = false
      },
      querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      loadAll() {
        return [
          { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
          { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
          { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
          { "value": "泷千家(天山西路店)", "address": "天山西路438号" },
          { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
          { "value": "贡茶", "address": "上海市长宁区金钟路633号" },
          { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
          { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },
          { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },
          { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },
          { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },
          { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },
          { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },
          { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },
          { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },
          { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },
          { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },
          { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
          { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
          { "value": "枪会山", "address": "上海市普陀区棕榈路" },
          { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },
          { "value": "钱记", "address": "上海市长宁区天山西路" },
          { "value": "壹杯加", "address": "上海市长宁区通协路" },
          { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },
          { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },
          { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },
          { "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },
          { "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },
          { "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },
          { "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },
          { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },
          { "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },
          { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },
          { "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },
          { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },
          { "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },
          { "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },
          { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },
          { "value": "浏阳蒸菜", "address": "天山西路430号" },
          { "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },
          { "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },
          { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },
          { "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },
          { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },
          { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },
          { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },
          { "value": "阳阳麻辣烫", "address": "天山西路389号" },
          { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }
        ];
      },
      handleSelect(item){
        console.log(item);
      },
      handleIconClick(ev){
        console.log(ev);
      },
    },
  }
</script>

<style scoped>
  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

  .item .el-table-column__label {
    color: #d23030;
  }
 .item >>> .el-table__empty-block{
    display: none;
  }

  .el-textarea__inner{
    min-height: 200px;
  }

</style>
